<template>
    <div ref="jsoneditor"></div>
</template>


<script>
export default {
    name: 'json-editor',
    props: ['value'],

    data() {
        return {
            syncValue: this.value,
        }
    },
    mounted() {
        this.editor = new JSONEditor(this.$refs.jsoneditor, {
            mode: 'code',
            statusBar: false,
            navigationBar: false,
            onChangeText: (text) => {
                console.log('[jsoneditor] emit')
                this.syncValue = text
                this.$emit('input', text)
            },
        })
        if (this.value) {
            this.editor.setText(this.value)
        }
    },
    watch: {
        value(val) {
            if (this.syncValue == val) {
                return
            }
            console.log('[jsoneditor] watch')
            this.editor.setText(val)
        },
    },
}
</script>

